import React, { Component } from 'react'
import {
    View,
    TouchableOpacity,
    StyleSheet,
    Text,
    LayoutAnimation
} from 'react-native'

let itemCount = 0;

import PropTypes from 'prop-types';

class SegmentTab extends Component {
    static propTypes = {
        values: PropTypes.array,
        onTabPress: PropTypes.func,
        selectedIndex: PropTypes.number,
        tabsContainerStyle: PropTypes.style,
        tabStyle: PropTypes.style,
        activeTabStyle: PropTypes.style,
        tabTextStyle: PropTypes.style,
        activeTabTextStyle: PropTypes.style,
        borderRadius: PropTypes.number
    };

    static defaultProps = {
        values: ['One', 'Two', 'Three'],
        selectedIndex: 0,
        onTabPress() {},
        tabsContainerStyle: {},
        tabStyle: {},
        activeTabStyle: {},
        textStyle: {},
        activeTextStyle: {},
        borderRadius: 0
    };


  constructor(props) {
    super(props)
    this.onTabPress = this.onTabPress.bind(this)
    this.state = {
      selectedIndex: this.props.selectedIndex
    }
    itemCount = this.props.values.length;
  }

  onTabPress(index) {
    LayoutAnimation.configureNext(null);

    this.setState({
        selectedIndex: index
    }, () => this.props.onTabPress(index))
  }

  renderTabOption(tab, index) {
    const {values, borderRadius} = this.props;
    const isTabActive = this.state.selectedIndex === index;
    const firstTabStyle = index === 0 ? [{ }] : {};
    const lastTabStyle = index === values.length - 1 ? [{   }] : { }

    let borderStyle = {};
    if(index < itemCount-1) {
      borderStyle = {borderRightWidth: 1};
    }

    return (
        <TouchableOpacity style={[styles.tabStyle,
            this.props.tabStyle,
            isTabActive ? {borderBottomWidth:1,borderColor:'#3090dd'} : {},
            isTabActive ? this.props.activeTabStyle : {},
            firstTabStyle,
            lastTabStyle,
            {height:40}
        ]}
            key={index}
            onPress={() => this.onTabPress(index) }
            activeOpacity={1}>
            <Text style={[styles.textStyle,
                this.props.tabTextStyle,
                isTabActive ? styles.activeTabTextStyle : {},
                isTabActive ? this.props.activeTabTextStyle : {}]}>{tab}</Text>
        </TouchableOpacity>
    )
  }

  render() {
    const {values} = this.props;
    return (
        <View style={[styles.tabsContainerStyle, this.props.tabsContainerStyle]}>
            {values.map((item, index) => this.renderTabOption(item, index)) }
        </View>
    )
  }

}


const styles = StyleSheet.create({
    tabsContainerStyle: {
        backgroundColor: 'transparent',
        flexDirection: 'row',
        borderRadius:5,
        borderWidth:1,
        borderColor:'#ffffff'
    },
    tabStyle: {
        paddingVertical: 5,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // borderColor: '#3090dd',
        // borderBottomWidth: 1,
        backgroundColor: 'rgba(0,0,0,0)',
    },
    activeTabStyle: {
        backgroundColor: '#0076FF'
    },
    tabTextStyle: {
        color: '#0076FF'
    },
    activeTabTextStyle: {
        color: '#000000'
    }
})

export default SegmentTab
